import './login.scss'
import {MyInput,TextLink,MyButton} from '../../components'
import { useEffect, useRef, useState } from 'react';
import http from '../../utils/http';
import api from '../../api';
import { message } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';
import { setToken, setUserId, setUserType } from '../../store/modules/authStore';
import { useAppDispatch, useAppSelector } from '../../utils/storeHook/storeHook';
import { useNavigate } from 'react-router-dom';
import { setChannelId, setServerId } from '../../store/modules/channelStore';

type registerForm = {
    email:string,
    password:string,
    confirmPassword:string,
    username:string,
    captcha:string
}
type loginForm = {
    email:string,
    password:string
}

function LoginForm({changeLoginState,messageApi,enterAsGuest}:{changeLoginState:()=>void,messageApi:MessageInstance,enterAsGuest:Function}){
    const dispatch = useAppDispatch()
    const Navigate = useNavigate()
    const formCN = {
        email: '邮箱',
        password: '密码',
    }
    const [loginForm,setLoginForm] = useState<loginForm>({
        email:'',
        password:''
    })

        function handleLoginFormChange(value:string,id:string){ 
        setLoginForm(prev=>({...prev,[id]:value}))
    }

    function handleLogin(){
        for(let key in loginForm){
            const formKey = key as keyof loginForm
            if(loginForm[formKey] == ''){
                messageApi.open({
                    type: 'error',
                    content: `请输入${formCN[formKey]}信息`,
                });
                return
            }
        }
        http.post(api.auth.login,{...loginForm}).then(res=>{ 
            const resData=res.data
            dispatch(setToken(resData.access_token))
            dispatch(setUserType('normalUser'))
            dispatch(setUserId(resData.user_id))
            dispatch(setServerId('notice'))
            dispatch(setChannelId(''))
            messageApi.open({
                type: 'success',
                content: '登录成功',
            });
            Navigate('/notice')
        }).catch(err=>{
            messageApi.open({
                type: 'error',
                content: err.message,
            });
        })
    }
    return ( 
        <div className="form_box">
            <div className="login_form_header">
                <h2>欢迎回来</h2>
                {/* <p>重新连接到您的社群和好友</p> */}
            </div>
            
            <form className="login_form">
                <div className="login_form_group">
                    <label htmlFor="email">电子邮箱</label>
                    <MyInput
                        type='text'
                        placeholder="email@example.com"
                        id='email'
                        onChange={handleLoginFormChange}
                        value={loginForm.email}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="login_form_group">
                    <label htmlFor="password">密码</label>
                    <MyInput
                        type='password'
                        placeholder="••••••••"
                        id='password'
                        onChange={handleLoginFormChange}
                        value={loginForm.password}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                            <path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="forgot_password">
                    <TextLink>忘记密码</TextLink>
                </div>
                <MyButton name='登录账号' type='primary' onClick={handleLogin} height={50}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
                        <path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"/>
                    </svg>
                </MyButton>
                <MyButton name='游客体验' type='guest' onClick={enterAsGuest} height={50}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16" height="16">
                        <path fill="currentColor" d="M496 224c-79.6 0-144 64.4-144 144s64.4 144 144 144 144-64.4 144-144-64.4-144-144-144zm64 150.3c0 5.3-4.4 9.7-9.7 9.7h-60.6c-5.3 0-9.7-4.4-9.7-9.7v-76.6c0-5.3 4.4-9.7 9.7-9.7h12.6c5.3 0 9.7 4.4 9.7 9.7V352h38.3c5.3 0 9.7 4.4 9.7 9.7v12.6zM320 368c0-27.8 6.7-54.1 18.2-77.5-8-1.5-16.2-2.5-24.6-2.5h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h347.1c-45.3-31.9-75.1-84.5-75.1-144zm-96-112c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128z"/>
                    </svg>
                </MyButton>
                
                {/* <div className="divider">或者通过以下方式登录</div>
                
                <div className="social_login">
                    <a href="#" className="social_btn google">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512" width="16" height="16">
                            <path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
                        </svg>
                        <span>Google</span>
                    </a>
                    <a href="#" className="social_btn facebook">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                            <path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/>
                        </svg>
                        <span>Facebook</span>
                    </a>
                </div> */}
            </form>
            
            <div className="signup_prompt">
                还没有账号？<TextLink onClick={changeLoginState}>立即注册</TextLink>
            </div>
        </div>
    )
}

function RegisterForm({changeLoginState,messageApi,enterAsGuest}:{changeLoginState:()=>void,messageApi:MessageInstance,enterAsGuest:Function}){

    const formCN = {
        email: '邮箱',
        password: '密码',
        confirmPassword: '确认密码',
        username: '用户名',
        captcha: '验证码'
    }
    const toolTipRef = useRef<HTMLDivElement>(null);
    const [captcha, setCaptcha] = useState('');
    const [pwdVis, setPwdVis] = useState(false);
    const [registerForm, setRegisterForm] = useState<registerForm>({
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        captcha: ''
    })

    function showTooltip(){
        if(toolTipRef.current){
            toolTipRef.current.style.display = 'block'
            setTimeout(()=>{
                if(toolTipRef.current){
                    toolTipRef.current.style.display = 'none'
                }
            },3000)
        }
    }

    function handleResgisterChange(value:string,id:string){ 
        setRegisterForm(prev=>({...prev,[id]:value}))
    }

    function changePwdVis(){
        setPwdVis(prev=>!prev)
    }

    function handleRegister(){
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
        const patternList = [
        // 是否包含数字
        /(?=.*\d)/,
        // 是否包含小写字母
        /(?=.*[a-z])/,
        // 是否包含大写字母
        /(?=.*[A-Z])/,
        // 是否包含特殊字符
        /(?=.*[!@#$%^&*])/,
        // 长度至少为8个字符
        // /.{8,}/
        ]
        let psdCount = 0
        let isCaptcha = true
        for(let key of patternList){
            
            if(key.test(registerForm.password)){
                psdCount++
            }
        }
        for(let key in registerForm){
            const formKey = key as keyof registerForm
            if(registerForm[formKey] == ''){
                messageApi.error(`请填写${formCN[formKey]}`)
                return
            }
        }
        if(registerForm.password !== registerForm.confirmPassword){
            messageApi.error('两次密码不匹配')
            return
        }
        if(!emailPattern.test(registerForm.email)){
            messageApi.error('邮箱格式不正确')
            return
        }
        if(registerForm.password.length < 8){
            messageApi.error('密码长度不能小于8位')
            return
        }
        if(psdCount < 2){
            console.log(psdCount);
            messageApi.error('密码强度不够(需包含至少2种字符)')
            return
        }
        for(let index in captcha.split('')){
            console.log(registerForm.captcha.split('')[index],captcha.split('')[index].toLowerCase(),captcha.split('')[index].toUpperCase());
            
            if(registerForm.captcha.split('')[index] !== captcha.split('')[index].toLowerCase() && registerForm.captcha.split('')[index] !== captcha.split('')[index].toUpperCase()){
                console.log(registerForm.captcha.split('')[index] !== captcha.split('')[index].toLowerCase(),registerForm.captcha.split('')[index] !== captcha.split('')[index].toUpperCase());
                isCaptcha = false
            }
        }
        
        if(!isCaptcha){
            messageApi.error('验证码不正确')
            return
        }
        http.post(api.auth.register,{...registerForm}).then(()=>{
            setRegisterForm({
                username: '',
                email: '',
                password: '',
                confirmPassword: '',
                captcha: ''
            })
            changeLoginState()
            messageApi.open(
                {
                    type: 'success',
                    content: '注册成功!',
                }
            )
        }).catch(err=>{
            messageApi.open(
                {
                    type: 'error',
                    content: err.message,
                }
            )
        })
    }

    function getCaptcha(){
        http.get(api.auth.getCaptcha)
        .then(res=>{
            const captcha = res.data.captcha
            setCaptcha(captcha)
        })
    }

    function refreshCaptcha(){
        getCaptcha()
    }

    useEffect(()=>{
        getCaptcha()
    },[])

    return ( 
        <div className="register_form">
            <div className="register_form_header">
                <h2>创建LinkChat账号</h2>
                {/* <p>加入我们，体验轻量级社群沟通工具</p> */}
            </div>
            
            <form className="register_form">
                {/* <div className="flex_group">
                    <div className="register_form_group" style={{flex: 1}}>
                        <label htmlFor="firstName">名</label>
                        <MyInput type="text" id="firstName" placeholder="如：小美">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                                <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                            </svg>
                        </MyInput>
                    </div>
                    
                    <div className="register_form_group" style={{flex: 1}}>
                        <label htmlFor="lastName">姓</label>
                        <MyInput type="text" id="lastName" placeholder="如：张">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                                <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                            </svg>
                        </MyInput>
                    </div>
                </div> */}
                
                <div className="register_form_group">
                    <label htmlFor="username">用户名</label>
                    <MyInput 
                        type="text" 
                        id="username" 
                        placeholder="输入唯一用户名"
                        onChange={handleResgisterChange}
                        value={registerForm.username}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8 8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5 2.24-5 5 2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47.65.89 1.77 1.47 2.96 1.47 1.97 0 3.5-1.6 3.5-3.57V12c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="register_form_group">
                    <label htmlFor="email">电子邮箱</label>
                    <MyInput 
                        type='email' 
                        id='email' 
                        placeholder='email@example.com'
                        onChange={handleResgisterChange}
                        value={registerForm.email}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
                            <path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="register_form_group">
                    <label htmlFor="password">
                        <span>密码 </span>
                        <span className="password_info" onClick={()=>showTooltip()}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
                                <path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"/>
                            </svg>
                            <div className="tooltip" id="passwordTooltip" ref={toolTipRef}>
                                <strong>密码要求：</strong>
                                <ul>
                                    <li><span className="requirement">✓</span> 至少8个字符</li>
                                    <li><span className="requirement">✓</span> 包含字母和数字</li>
                                    <li><span className="requirement">✓</span> 可包含特殊字符</li>
                                    <li><span className="requirement">✓</span> 区分大小写</li>
                                </ul>
                            </div>
                        </span>
                    </label>
                    <MyInput 
                        type={pwdVis ? 'text' : 'password'} 
                        id="password" 
                        placeholder="创建安全密码"
                        onChange={handleResgisterChange}
                        value={registerForm.password}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16" height="16" id="togglePassword" style={{cursor: 'pointer'}} onClick={changePwdVis}>
                            <path fill="currentColor" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.5 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.9-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="register_form_group">
                    <label htmlFor="confirmPassword">确认密码</label>
                    <MyInput 
                        type="password" 
                        id="confirmPassword" 
                        placeholder="再次输入密码"
                        onChange={handleResgisterChange}
                        value={registerForm.confirmPassword}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
                            <path fill="currentColor" d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17v80c0 13.3 10.7 24 24 24h80c13.3 0 24-10.7 24-24V448h40c13.3 0 24-10.7 24-24V384h40c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/>
                        </svg>
                    </MyInput>
                </div>
                
                <div className="captcha_container">
                    <div className="captcha_box">{captcha || '点击刷新'}</div>
                    <div className="refresh_captcha" onClick={refreshCaptcha}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M23 4v6h-6" strokeLinecap="round" strokeLinejoin="round"/>
                            <path d="M1 20v-6h6" strokeLinecap="round" strokeLinejoin="round"/>
                            <path d="M3.51 9A9 9 0 0 1 18.5 4.5" strokeLinecap="round"/>
                            <path d="M20.49 15A9 9 0 0 1 5.5 19.5" strokeLinecap="round"/>
                            <path d="M18.5 4.5L23 10M5.5 19.5L1 14" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                    </div>
                    <MyInput 
                        type="text" 
                        className="captcha_input" 
                        id='captcha'
                        placeholder="输入验证码"
                        onChange={handleResgisterChange}
                        value={registerForm.captcha}
                    ></MyInput>
                </div>
                
                {/* <div className="register_form_check">
                    <input type="checkbox" id="terms"/>
                    <label htmlFor="terms">我同意 <TextLink>服务条款</TextLink> 和 <TextLink>隐私政策</TextLink>，并了解我的数据将按照上述文件所述处理。</label>
                </div>
                
                <div className="register_form_check">
                    <input type="checkbox" id="marketing"/>
                    <label htmlFor="marketing">我愿意接收产品更新和营销邮件（可随时取消订阅）</label>
                </div> */}
                
                <MyButton name='注册账号' type='primary' onClick={handleRegister} height={50}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="16" height="16">
                        <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-22.2 22.2c-14.8 14.8-20.3 35.9-14.7 55.3H592c26.5 0 48-21.5 48-48 0-97.2-78.8-176-176-176-64.8 0-121.8 35-153.1 87.2l47.3 47.3 11.1 1.2 60.9 6.8c1.3.1 2.6.2 3.9.2zM480 320c17.7 0 32 14.3 32 32v48h48c17.7 0 32 14.3 32 32s-14.3 32-32 32h-48v48c0 17.7-14.3 32-32 32s-32-14.3-32-32v-48h-48c-17.7 0-32-14.3-32-32s14.3-32 32-32h48v-48c0-17.7 14.3-32 32-32z"/>
                    </svg>
                </MyButton>
            </form>
            
            <div className="guest_option">
                <TextLink onClick={()=>changeLoginState()}>登录</TextLink>
                <span>或者</span>
                <TextLink onClick={()=>enterAsGuest()}>以游客身份体验</TextLink>
            </div>
            <div className="divider"></div>
        </div>
    )
}

function Login(){
    const [messageApi, contextHolder] = message.useMessage()
    const [isLogin,setIsLogin] = useState<boolean>(true)
    const token = useAppSelector(state=>state.auth.token)
    const dispatch = useAppDispatch()
    const navigate = useNavigate()

    function handleChangeLoginState(){
        setIsLogin(!isLogin)
    }

    function enterAsGuest(){
        if(token){
            navigate('/notice')
        }else{
            http.post(api.auth.guest).then(res=>{
                console.log(res);
                
                dispatch(setToken(res.data.session_token))
                dispatch(setUserType('guestUser'))
                dispatch(setUserId(res.data.guest_id))
                dispatch(setServerId('notice'))
                dispatch(setChannelId(''))
                navigate('/notice')
            })
        }
    }
    return (
        <> 
            {contextHolder}
            <div className="login_box">
                <div className="login">
                    <div className="login_left">
                        <div className='login_left_content'>
                            <div className="login_logo">
                                <div className="login_logo_icon">
                                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="50" cy="50" r="46" fill="none" stroke="var(--primary)" stroke-width="3" />
                                        <circle cx="30" cy="50" r="12" fill="var(--primary)" />
                                        <circle cx="70" cy="50" r="12" fill="var(--primary)" />
                                        <path d="M30,50 C38,30 62,30 70,50" stroke="var(--primary)" stroke-width="6" fill="none" />
                                    </svg>
                                </div>
                                <h1>LinkChat</h1>
                            </div>
                            
                            <div className="login_welcome">
                                <h2>保持简单连接</h2>
                                <p>与好友分享每一个精彩时刻</p>
                            </div>
                        </div>
                    </div>
                    <div className="login_right">
                        {/* <div className="tabs">
                            <div className="tab tabActive">账号登录</div>
                            <div className="tab">扫码登录</div>
                            <div className="tab">短信登录</div>
                        </div> */}
                        {isLogin?<LoginForm messageApi={messageApi} changeLoginState={handleChangeLoginState} enterAsGuest={enterAsGuest}></LoginForm>:<RegisterForm messageApi={messageApi} changeLoginState={handleChangeLoginState} enterAsGuest={enterAsGuest}></RegisterForm>}
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login;